<script setup lang="ts">
import { getDeptListApi, deptDeleteApi } from '@/apis/dept'
import updateDialog from './components/updateDialog.vue'
import { useHandleData } from "@/hooks/useHandleData";

const tableData = ref([])

/** 搜索 */
const searchParams = ref({
    deptName: ''
})

/** 弹窗属性 */
const dialogOptions = reactive({
    show: false,
    info: {},
    pid: 0
})

/** 获取基础价格列表 */
const getList = async () => {
    const data = await getDeptListApi(searchParams.value)
    tableData.value = data.list
}


/** 打开编辑弹窗 */
const openEdit = (row) => {
    dialogOptions.info = row
    dialogOptions.show = true
}

/** 格式化时间 */
const formatTime = (row) => {
    return new Date(row.create_time).toLocaleString()
}

/** 格式化性别 */
const formatSex = (row) => {
    return row.sex === 1 ? '男' : '女'
}
/** 格式化权限 */
const formatAuth = (row) => {
    return row.auth === 1? '超级管理员' : '普通管理员'
}

/** 删除 */
const handleDelete = async (params) => {
    await useHandleData(deptDeleteApi, { id: params._id }, `删除【${params.deptName}】`);
    getList()
}

/** 打开新增弹窗 */
const openDialog = (pid) => {
    dialogOptions.pid = pid
    dialogOptions.show = true
}

onMounted(() => {
    getList()
})
</script>
<template>
    <div class="user-manage-container">
        <div class="search-box">
            <el-form inline>
                <el-form-item label="部门名称">
                    <el-input v-model="searchParams.deptName" placeholder="请输入部门名称" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getList">搜索</el-button>
                    <el-button>重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="table-box">
            <div class="operate-btn">
                <el-button type="primary" @click="openDialog(0)">新增</el-button>
            </div>
            <el-table border :data="tableData" stripe style="width: 100%">
                <el-table-column prop="deptName" label="部门名称" />
                <el-table-column prop="create_time" label="创建时间"  :formatter="formatTime" />
                <el-table-column fixed="right" width="140" label="操作" align="center">
                    <template v-slot="scope">
                        <el-button text type="primary" size="small" @click="openEdit(scope.row)">编辑</el-button>
                        <el-button text type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <update-dialog :pid="dialogOptions.pid" :info="dialogOptions.info" v-model:visible="dialogOptions.show" @confirm="getList"></update-dialog>
    </div>
</template>

<style lang="scss" scoped>
.user-manage-container {}
</style>